<template>
  <div
    id="app"
    class="container"
  >
    <a
      class="logo"
      href="https://cloud.tencent.com/product/sf"
      target="_blank"
      rel="noopener noreferrer"
    >
      <img
        src=""
        alt="Tencent Cloud Logo"
      />
    </a>
    <img
      style="margin-left: 50px; margin-bottom: 5px;"
      src=""
      alt="Serverless Logo"
    />

    <section class="title">
      <div class="left title-left">
        <h1>Next generation, serverless cloud</h1>
        <h3>
          Tencent Cloud and Serverless have joined forces to create a
          serverless cloud focused on delivering outcomes, not
          infrastructure. Everything autoscaling; never pay for idle.
        </h3>
      </div>
      <div class="right title-right">
        <img
          class="title-gif"
          src="./assets/tencent-cloud-hero.gif"
          alt="Serverless Framework CLI - Tencent Cloud"
        />
      </div>
    </section>
    <!-- 
        <div class="hero">
          <img src="./src/images/hero.png" />
    </div>-->
    <div class="tagline">
      This is a fullstack app built on tencent serverless components via the serverless
      framework
    </div>
    <div class="user-wrapper">
      <!-- user form -->
      <UserForm @submit="addUser" />

      <!-- user list -->
      <UserList
        :loading="loading"
        :list="userList"
        @delete="deleteUser"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import UserForm from "./components/UserForm";
import UserList from "./components/UserList";

export default {
  name: "app",
  components: {
    UserForm,
    UserList
  },
  data: function() {
    return {
      loading: false,
      message: "Click me!",
      isVisible: true,
      userList: []
    };
  },
  methods: {
    async queryServer() {
      const response = await fetch(window.env.apiUrl);
      const result = await response.json();
      this.message = result.message;
    },

    // get user list
    async getUsers() {
      this.loading = true;
      const { data } = await axios.get(`${window.env.apiUrl}user`);

      if (data.code !== 0) {
        this.userList = [];
      } else {
        this.userList = data.data || [];
      }
      this.loading = false;
    },

    formCheck(data) {
      if (!data.name) {
        alert("Please input name");
        return false;
      }
      if (!data.email) {
        alert("Please input email");
        return false;
      }
      if (!data.site) {
        alert("Please input site");
        return false;
      }
      return true;
    },

    // add a user
    async addUser(formData) {
      if (!this.formCheck(formData)) {
        return;
      }
      this.loading = true;
      const { data } = await axios.post(`${window.env.apiUrl}user`, formData);
      if (data.code !== 0) {
        alert(data.message);
      } else {
        this.getUsers();
      }
      this.loading = false;
    },

    async deleteUser(name) {
      const { data } = await axios.delete(`${window.env.apiUrl}user/${name}`);
      if (data.code !== 0) {
        alert(data.message);
      } else {
        this.getUsers();
      }
    }
  },
  mounted() {
    // get user list after ui mounted
    this.getUsers();
  }
};
</script>

<style>
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
